<template>
    <div class="content">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <template v-if="active === 0">
                <div class="stepCenter">
                    <h3 class="title">新增审核意见：</h3>
                    <div class="step">
                        <el-form-item label="执法项目类别">
                            <el-select v-model="form.caseSource" placeholder="请选择" style="width: 100%">
                                <el-option
                                    v-for="item in sourceOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="案件名称">
                            <el-input v-model="form.caseNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="申请单位">
                            <el-input v-model="form.caseType"></el-input>
                        </el-form-item>
                        <el-form-item label="申请书">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.caseOrigin">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="基本情况">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.caseOrigin">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="违法事实证据">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.caseOrigin">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="意见书">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.caseOrigin">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="拟做出的处罚决定">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.caseOrigin">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="审核意见">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.caseOrigin">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="审核人">
                            <el-input v-model="form.parties"></el-input>
                        </el-form-item>
                        <el-form-item label="审核时间">
                            <el-date-picker
                                style="width: 100%"
                                v-model="form.punishInformTime"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </div>
            </template>

            <div class="btns">
                <el-button type="primary" round @click="staging">暂 存</el-button>
                <el-button type="success" round @click="submit">保 存</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    name: 'Add',
    data () {
        return {
            active: 0,
            stepsList: ['基本信息', '调查取证', '音视频文书材料', '处罚告知', '处罚决定'],
            form: {
                caseNumber: '', // 案件编号
                caseSource: '', // 案件来源
                caseType: '', // 案件类型
                subject: '', //  执法主体
                lawMan: '', // 执法人员
                lawSite: '', // 执法地点
                category: '', // 案件类别
                caseState: '', // 是否立案
                caseOrigin: '', // 案由
                caseDescription: '', // 案件描述
                partiesType: '', // 当事人类型
                parties: '', // 当事人姓名
                cardType: '', // 证件类型
                idNumber: '', // 证件号码
                phone: '', // 当事人联系方式
                address: '', // 当事人联系地址
                isDistribute: '', // 是否派送
                distributeMan: '', // 派送人员
                illegalFact: '', // 违法事实
                illegalBasis: '', // 违法依据
                addTime: '', // 录入时间

                malfeasanceFact: '', // 违法事实2
                malfeasanceBasis: '', // 违法依据2
                punishBasis: '', // 处罚依据
                punishContent: '', // 处罚内容
                punishInformTime: '', // 处罚告知时间
                decisionType: '', // 决定类别
                punishType: '', // 处罚决定种类
                decisionDate: '', // 决定日期
                docNumber: '', // 决定文书号
                decidedBook: '', // 决定书
                serviceWay: '', // 送达方式
                serviceDate: '', // 送达日期
                serviceProof: ''// 送达回证
            },
            evidenceForm: {
                date: '',
                address: '',
                describe: ''
            },
            sourceOption: [
                { label: '群众举报', value: '群众举报' },
                { label: '上级交办', value: '上级交办' },
                { label: '部门移交', value: '部门移交' },
                { label: '巡查上报', value: '巡查上报' },
                { label: '其他', value: '其他' }
            ],
            partiesTypeOption: [
                { label: '法人', value: '法人' },
                { label: '自然人', value: '自然人' },
                { label: '非法人组织', value: '非法人组织' },
                { label: '个人工商户', value: '个人工商户' }
            ],
            cardTypeOption: [
                { label: '身份证号', value: '身份证号' },
                { label: '统一社会信用代码', value: '统一社会信用代码' }
            ],
            decisionTypeOption: [
                { label: '不予处罚', value: '不予处罚' },
                { label: '行政处罚', value: '行政处罚' },
                { label: '行政许可', value: '行政许可' },
                { label: '行政强制', value: '行政强制' },
                { label: '行政征收征用', value: '行政征收征用' },
                { label: '行政检查', value: '行政检查' },
                { label: '其他', value: '其他' }
            ],
            punishTypeOption: [
                { label: '警告', value: '警告' },
                { label: '罚款', value: '罚款' },
                { label: '没收违法所得', value: '没收违法所得' },
                { label: '没收非法财物', value: '没收非法财物' },
                { label: '责令停产停业', value: '责令停产停业' },
                { label: '暂扣或者吊销许可证', value: '暂扣或者吊销许可证' },
                { label: '行政拘留', value: '行政拘留' },
                { label: '其他', value: '其他' }
            ],
            serviceWayOption: [
                { label: '直接送达', value: '直接送达' },
                { label: '留置送达', value: '留置送达' },
                { label: '委托送达', value: '委托送达' },
                { label: '邮递送达', value: '邮递送达' },
                { label: '公告送达', value: '公告送达' },
                { label: '送达回证', value: '送达回证' }
            ],
            rules: {
                name: [{ required: true }]
            },
            evidenceInfoShow: false,
            evidenceInfo: [],
            isEdit: false,
            editIndex: ''
        }
    },
    filters: {
        format: function (date) {
            return moment(date).format('yyyy-MM-DD')
        }
    },
    mounted () {
        const form = localStorage.getItem('form')
        if (form) {
            this.form = JSON.parse(form)
            if (this.form.evidenceInfo) {
                this.evidenceInfo = this.form.evidenceInfo
            }
        }
    },
    methods: {
        openEvidentce: function () {
            this.evidenceInfoShow = true
        },
        add: function () {
            this.evidenceInfoShow = false
            this.evidenceForm.addTime = new Date()
            this.evidenceInfo.push(this.evidenceForm)
            localStorage.setItem('evidenceInfo', JSON.stringify(this.evidenceInfo))
            this.evidenceForm = {
                date: '',
                address: '',
                describe: ''
            }
        },
        edit: function () {
            const _this = this
            this.$set(this.evidenceInfo, this.editIndex, {
                date: _this.evidenceForm.date,
                address: _this.evidenceForm.address,
                describe: _this.evidenceForm.describe,
                addTime: _this.evidenceForm.addTime
            })
            this.isEdit = false
            this.evidenceInfoShow = false
        },
        submit: function () {
            this.$confirm('确定要提交吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                localStorage.removeItem('form')
                this.$message({
                    type: 'success',
                    message: '提交成功！!'
                })
                this.$router.push('/auditList')
            })
        },
        staging: function () {
            this.form.evidenceInfo = this.evidenceInfo
            localStorage.setItem('form', JSON.stringify(this.form))
            this.$message({
                type: 'success',
                message: '暂存成功！!'
            })
        },
        handleEdit (index, row) {
            this.isEdit = true
            this.editIndex = index
            this.evidenceInfoShow = true
            this.evidenceForm = {
                date: row.date,
                address: row.address,
                describe: row.describe,
                addTime: row.addTime
            }
        },
        handleDelete (index, row) {
            this.evidenceInfo.splice(index, 1)
        }
    }
}
</script>

<style scoped lang="less">
.content {
    margin: 15px 15px 80px 15px; background: #FFFFFF; border-radius: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.06); padding: 20px 30px;
}
h3.title {
    font-size: 16px; font-weight: bold; line-height: 50px; padding-left: 30px; border-bottom: 1px rgba(0,0,0,0.1) solid; margin-bottom: 20px;
}
.steps {
    width: 60%; min-width: 600px; margin: 20px auto;
}
.step {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-column-gap: 20px;
}
.stepCenter {
    width: 60%; min-width: 600px; margin: 20px auto;
}
.btns {
    position: fixed; bottom: 0;  right: 0; height: 60px; display: flex; align-items: center; background: #FFFFFF; width: calc(100% - 250px); justify-content: center; box-shadow: 0 -10px 20px rgba(0,0,0,0.06);
}
/deep/.el-upload {
    display: block !important;
}
/deep/.el-upload-dragger {
    width: 100% !important;
}
.evidenceForm {
    display: flex; justify-content: space-between;
    div {
        flex: 1;
    }
    .efRight {
        margin-left: 30px;
    }
}
</style>
